import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, ScrollView, Pressable } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { useNavigation } from '@react-navigation/native';
import SearchContent from './searchContent.js';
const Search = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const navigation = useNavigation();
  const categories = [
    {
      name: '投稿 · 求助',
      subcategories: [
        { name: '身边趣事', iconName: 'chatbubbles' },
        { name: '创作分享', iconName: 'arrow-undo-sharp' },
        { name: '吐槽爆料', iconName: 'flash' },
        { name: '时事新闻', iconName: 'newspaper' },
        { name: '情感', iconName: 'heart' },
        { name: '电子游戏', iconName: 'game-controller' },
      ],
    },
    {
      name: '招聘',
      subcategories: [
        { name: '全职', iconName: 'person-add' },
        { name: '兼职', iconName: 'person' },
        { name: '实习', iconName: 'timer' },
        { name: '校园招聘', iconName: 'school' },
        { name: '社会招聘', iconName: 'briefcase' },
      ],
    },
    {
      name: '闲置 · 讨论 · 求购',
      subcategories: [
        { name: '电子产品', iconName: 'desktop' },
        { name: '书籍', iconName: 'book' },
        { name: '服饰', iconName: 'shirt' },
        { name: '家具', iconName: 'bed' },
        { name: '运动器材', iconName: 'basketball' },
        { name: '乐器', iconName: 'musical-notes' },
      ],
    },
  ];

  const handleSearchSubmit = () => {
    navigation.navigate('SearchContent', { query: searchQuery });
  };

  return (
    <ScrollView style={styles.container}>
      {/* 搜索栏 */}
      <View style={styles.searchBar}>
        <Ionicons name="search" size={22} color="#C5C5C5" style={styles.searchIcon} />
        <TextInput
          placeholder="搜索与板块"
          style={styles.searchInput}
          value={searchQuery}
          onChangeText={setSearchQuery}
          onSubmitEditing={handleSearchSubmit}
        />
      </View>

      {/* 热搜标签 */}
      <View style={styles.hotSearchSection}>
        <Text style={styles.sectionTitle}>热门搜索</Text>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tagContainer}>
          <Pressable style={styles.tag} onPress={() => navigation.navigate('SearchContent', { query: '美食' })}><Text style={styles.tagText}>美食</Text></Pressable>
          <Pressable style={styles.tag} onPress={() => navigation.navigate('SearchContent', { query: '甜品' })}><Text style={styles.tagText}>甜品</Text></Pressable>
          <Pressable style={styles.tag} onPress={() => navigation.navigate('SearchContent', { query: '外卖' })}><Text style={styles.tagText}>外卖</Text></Pressable>
        </ScrollView>
      </View>

      {/* 内容分类 */}
      {categories.map((category, index) => (
        <View key={index} style={styles.categorySection}>
          <View style={styles.categoryTitleContainer}>
            <Text style={styles.categoryTitle}>{category.name}</Text>
          </View>
          <View style={styles.subcategoryContainer}>
            {category.subcategories.map((subcategory, subIndex) => (
              <Pressable key={subIndex} style={styles.subcategoryItem} onPress={() => navigation.navigate('SearchPlateContent', {
                boardName: subcategory.name,
                // boardexplain: item.boardexplain,
              })}>
                <Ionicons name={subcategory.iconName} size={16} color="#EB7A76" />
                <Text style={styles.subcategoryText}>{subcategory.name}</Text>
              </Pressable>
            ))}
          </View>
        </View>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  searchBar: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f2f2f2',
    borderRadius: 5,
    padding: 10,
    margin: 10,
  },
  searchIcon: {
    marginRight: 8,
  },
  searchInput: {
    flex: 1,
    fontSize: 14,
    // color: '#C5C5C5',
  },
  hotSearchSection: {
    marginTop: 5,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    marginLeft: 10,
    marginBottom: 5,
  },
  tagContainer: {
    paddingLeft: 10,
    marginBottom: 10,
  },
  tag: {
    backgroundColor: '#fff',
    borderColor: '#EB7A76',
    borderWidth: 1,
    borderRadius: 15,
    paddingVertical: 8,
    paddingHorizontal: 16,
    marginRight: 10,
  },
  tagText: {
    color: '#333',
    fontSize: 12,
  },
  categorySection: {
  },
  categoryTitleContainer: {
    backgroundColor: '#fff',
  },
  categoryTitle: {
    backgroundColor: '#EDEDED',
    height: 30,
    fontSize: 14,
    fontWeight: 'bold',
    color: '#333',
    paddingLeft: 10,
    paddingTop: 5,
    marginBottom: 5,
    alignItems: 'center',
  },
  subcategoryContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingLeft: 10,
  },
  subcategoryItem: {
    backgroundColor: '#EDEDED',
    padding: 8,
    borderRadius: 5,
    marginBottom: 10,
    marginRight: 10,
    width: '30%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  subcategoryText: {
    color: '#333',
    fontSize: 13,
  },
});

export default Search;